<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>聊天</title>
    <link rel="stylesheet"  href="./css/show.css">
    <script src="./js/jquery-3.5.1.min.js"></script>
    <script src="./js/websocket.js"></script>
    <script id="code">
        var DEBUG_FLAG = true;
        $(function (){
            // 启动websocket
            createWebSocket();
        });

        // 当有消息推送后触发下面事件
        function onWsMessage(evt){
            var jsonStr = evt.data;
            writeToScreen(jsonStr);
        }

        // 把message输出到屏幕
        function writeToScreen(message){
            if (DEBUG_FLAG){
                $("#debuggerInfo").val($("#debuggerInfo").val() + "\n" + message);
            }
        }

        function sendMessageBySocket(){
            // var msg = $("#msg").val();
            // wsObj.send(msg);

            // tousername为接收人的id，msg为发送的内容
            var toUsername = $("#toUsername").val();
            var msg = $("#msg").val();
            // 定义json格式的字符串
            var data = {"fromUsername": username, "toUsername": toUsername, "msg": msg};
            // 发送json对象
            wsObj.send(JSON.stringify(data));
            $("#msg").val("");
        }


            function sendMessageBySocket_QF() {
                var msg = $("#msg").val();
                // var username = $("#username").val();
                $.ajax({
                    url: "/sendMessage",
                    type:'post',
                    data: {
                        "msg":msg,
                        "username":username
                    },
                })
            }


    </script>
</head>

<body style="margin: 0px; padding: 0px; overflow: hidden;">
<div class="login">

    <!--退出按钮-->
    <input type="button" value="退出登录"
           onclick="location.href = 'login.html'"
           style="font-size: 28px; float:right; color: #03e6f4"></input>
    <!-- 显示消息 -->
    <textarea readonly="readonly" id="debuggerInfo" style=" background-color: #c4fff5;width: 100%; height: 450px; font-size: 25px"></textarea>


    <!-- 发送消息 -->
        <form>
            <br/>
            <h2 style="color: #03e6f4">你要发送给：</h2>
            <input type="text" id="toUsername" placeholder="请输入接收人名字" size="60px" style="height: 35px;font-size: 28px"; > <br>
            <br/>
            <h2 style="color: #03e6f4">发送的内容：</h2>
            <input type="text" id="msg" placeholder="请输入要发送的内容" size="60px" style="height: 35px;font-size: 28px"> <br>
            <br/>
            <input type="button" value="发送" onclick="sendMessageBySocket()" style="color: #03e6f4;font-size: 30px; margin-left:300px; border-radius: 10px;">
            <input type="button" value="群发" onclick="sendMessageBySocket_QF()" style="color: #03e6f4;font-size: 30px; margin-left: 200px; border-radius: 10px;">
        </form>
</div>
</body>
</html>